<template>
	<view class="content">
		<nav-bar title=' ' bgColor="rgba(255,255,255,0)" titleColor="#333333"></nav-bar>
		<view class="search-box">
			<u-search :shape="square" :showAction="false" placeholder="请输入要查询的内容" v-model="keyword"
				@change="searchChange"></u-search>
		</view>
		<!-- <view class="head-box">
			<view class="left">
				大咖·聊<text class="h1">财经</text><text class="h2">: 白酒股高开低走领跌两市</text>
			</view>
			<u-icon name="close" size="24rpx"></u-icon>
		</view> -->
		<view class="tab-box">
			<u-tabs lineWidth="0" lineHeight="0" :inactiveStyle="{color:'#efefef'}"
				:activeStyle="{color: '#FFFFFF',fontWeight: 'bold',transform: 'scale(1.05)'}" :list="tabClassify"
				@click="knowClick"></u-tabs>
			<view class="item-box">
				<view class="item" v-for="(item,index) in tabList" :key="item.id" @click="goKnowPage(item)">
					<view class="title">
						<view class="left">
							<text>{{item.number}}</text>{{item.title}}
						</view>
						<view class="right">
							{{item.titletag}}
						</view>
					</view>
					<view class="sub-title">
						<view class="left">
							{{item.remark}}
						</view>
						<!-- <view class="right">
							{{item.tag}}
						</view> -->
					</view>
				</view>
				<!-- <view class="more">
					查看更多>
				</view> -->
			</view>
		</view>
		<view class="item-list">
			<view class="item" v-for="(item,index) in itemList" @click="goKnowPage(item)">
				<view class="head">
					<u-image :src="item.img" width="84rpx" height="84rpx" shape="circle"></u-image>
					<view class="right">
						<view class="name">
							{{item.author}}
						</view>
						<view class="time-box">
							<view class="time">
								发布于{{item.article_time}}
							</view>
							<view class="zan">
								<u-icon name="thumb-up" size="38rpx"></u-icon>{{item.praise}}
							</view>
						</view>
					</view>
				</view>
				<view class="title">
					{{item.title}}
				</view>
				<view class="sub-title">
					{{item.remark}}
				</view>
			</view>
		</view>
		<view class="fgx"></view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name: "tab-know",
		data() {
			return {
				tabClassify: [{
					name: '热门文章',
				}],
				tabList: [],
				itemList:[],
				keyword:'',
			};
		},
		mounted() {
			app.globalData.index_login = 1;
			app.login();
			console.log(222222);
			this.get_data();
		},
		methods:{
			get_data(){
				var _this = this;
				app._get('article/get_data', {
					keyword:_this.keyword
				}, function(res) {
					_this.tabList = res.hots;
					_this.itemList = res.article;
				});
			},
			knowClick(e){
				console.log(e)
			},
			searchChange(e) {
				console.log(e);
				this.keyword = e;
				this.get_data();
			},
			goKnowPage(item){
				uni.navigateTo({
					url:"/pages/knowPage/knowPage?id="+item.id
				})
			}
		},
	}
</script>

<style lang="less">
	.content {
		width: 750rpx;
		min-height: 1334rpx;
		background-image: url('https://item.techolic.cn/hjf/Public/appimg/person_bg.png');
		background-repeat: no-repeat;
		background-size: cover;

		.search-box {
			padding: 32rpx;
		}

		.head-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 32rpx;
			padding: 28rpx 32rpx;
			background-color: #fdfaf6;
			border-radius: 16rpx;

			.left {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;
				color: #1E182F;

				.h1 {
					color: #FF8811;
					padding-right: 10rpx;
				}

				.h2 {
					font-size: 28rpx;
					color: #1E182F;
					font-weight: 500;
				}
			}
		}

		.tab-box {
			margin: 20rpx 32rpx;
			padding: 16rpx;
			background-color: #EFD1AE;
			background-image: url('https://item.techolic.cn/hjf/Public/appimg/index_product_bg.png');
			background-repeat: no-repeat;
			background-position-x: right;
			background-position-y: top;
			border-radius: 24rpx;

			.item-box {
				border-radius: 22rpx;
				background-color: #ffffff;
				padding: 32rpx;

				.item {
					padding-bottom: 32rpx;
					.title {
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;

						.left {
							font-size: 32rpx;
							color: #1E182F;
							font-weight: bold;

							text {
								margin-right: 14rpx;
								color: #ED4233;
							}
						}

						.right {
							padding: 6rpx 10rpx;
							margin-left: 12rpx;
							background-color: #ED4233;
							color: #ffffff;
							font-size: 24rpx;
							font-weight: bold;
							border-radius: 8rpx;
						}
					}
					.sub-title{
						display: flex;
						align-items: center;
						margin-bottom: 14rpx;
						.left{
							font-size: 24rpx;
							color: #1E182F;
						}
						.right{
							padding: 6rpx 10rpx;
							margin-left: 12rpx;
							font-size: 20rpx;
							background-color: #F5F5F5;
							color: #979797;
						}
					}
				}
			}
		}
		.item-list{
			margin: 32rpx;
			.item{
				padding: 32rpx;
				margin-bottom: 30rpx;
				background-color: #ffffff;
				border-radius: 24rpx;
				.head{
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;
					image{
						border: 2rpx solid #d1d1d1;
					}
					.right{
						margin-left: 20rpx;
						.name{
							margin-bottom: 10rpx;
							font-size: 32rpx;
							font-weight: bold;
							color: rgba(#1E182F,0.9);
						}
						.time-box{
							display: flex;
							align-items: center;
							.time{
								font-size: 24rpx;
								color: rgba(#1E182F,0.5);
								margin-right: 30rpx;
							}
							.zan{
								display: flex;
								align-items: center;
								font-size: 24rpx;
								color: #a7a7a7
							}
						}
						
					}
				}
				.title{
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(#1E182F,0.9);
					margin-bottom: 16rpx;
				}
				.sub-title{
					font-size: 24rpx;
					color: rgba(#1E182F,0.5);
					margin-bottom: 16rpx;
				}
			}
		}
		.fgx{
			height: 150rpx;
		}
	}
</style>